<template>
  <div class="header">
    <!--          导航栏伸缩按钮-->
    <div class="head-icon" @click="extend()">
      <svg t="1653627553506" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
           p-id="6915" width="30" height="30">
        <path
            d="M256 734.101333v64H170.666667v-64h85.333333z m597.333333 0v64H298.666667v-64h554.666666zM256 493.184v64H170.666667v-64h85.333333z m597.333333 0v64H298.666667v-64h554.666666zM256 252.245333v64H170.666667v-64h85.333333z m597.333333 0v64H298.666667v-64h554.666666z"
            p-id="6916" fill="#ffffff"></path>
      </svg>
    </div>

    <!--    退出登录按钮-->
    <div class="head-icon-right" @click="logoutVisible = true">
      <svg t="1653627665757" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
           p-id="7089" width="30" height="30">
        <path
            d="M405.333333 187.669333v68.266667c-100.224 41.770667-170.666667 140.693333-170.666666 256.064 0 153.173333 124.16 277.333333 277.333333 277.333333s277.333333-124.16 277.333333-277.333333c0-115.370667-70.442667-214.272-170.666666-256.064l0.021333-68.266667C754.944 232.469333 853.333333 360.746667 853.333333 512c0 188.522667-152.810667 341.333333-341.333333 341.333333S170.666667 700.522667 170.666667 512c0-151.253333 98.389333-279.552 234.666666-324.330667zM544 138.666667v384h-64v-384h64z"
            p-id="7090" fill="#ffffff"></path>
      </svg>
    </div>

    <!--    退出登录确认弹框-->
    <div class="confirm-logout">
      <el-dialog title="提示" :visible.sync="logoutVisible" width="30%">
        <svg t="1653909205799" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="2337" width="22" height="22" style="vertical-align: middle;margin-right: 10px">
          <path
              d="M512 9.80005925C233.83608889 9.80005925 8.46506667 235.29244445 8.46506667 513.33499259s225.37102222 503.6562963 503.53493333 503.6562963 503.53493333-225.49238518 503.53493333-503.53493334-225.37102222-503.6562963-503.53493333-503.6562963z m3.2768 818.35045927h-2.42725925c-34.83117037 0-62.98737778-28.15620741-62.98737778-62.98737777s28.15620741-62.98737778 62.98737778-62.98737778h2.42725925c34.83117037 0 62.98737778 28.15620741 62.98737778 62.98737778s-28.15620741 62.98737778-62.98737778 62.98737777z m191.51075555-388.11875555c-11.65084445 30.09801482-32.28254815 55.82696297-58.86103703 74.0314074-12.25765925 8.49540741-23.9085037 16.86945185-34.83117037 25.36485926-10.92266667 8.49540741-20.6317037 18.08308148-29.00574815 29.00574815-8.00995555 10.31585185-13.22856297 23.30168889-15.53445925 38.71478519 0 0.36408889-2.91271111 22.08805925-8.13131853 29.61256295-9.58767408 15.4130963-26.45712592 25.72894815-45.8752 25.72894816h-2.06317037c-20.75306667 0-40.65659259-12.62174815-49.63745185-29.8552889-5.5826963-11.28675555-4.97588148-29.00574815-4.97588148-29.00574815 1.57771852-23.42305185 6.18951111-43.08385185 13.47128889-58.86103703 6.67496297-14.68491852 15.29173333-28.27757037 25.85031111-40.53522963 9.8304-11.16539259 20.14625185-20.75306667 31.19028148-29.00574815 10.92266667-8.13131852 20.99579259-16.384 30.21937778-24.51531852 9.34494815-8.13131852 16.74808889-17.23354075 22.57351111-27.06394073 5.70405925-9.70903703 8.25268148-22.08805925 7.76722963-36.77297779 0-25.12213333-6.06814815-43.69066667-18.32580741-55.58423703-12.25765925-12.01493333-29.36983703-17.96171852-51.21517036-17.96171852-14.68491852 0-27.42802963 2.91271111-37.98660742 8.61677037-10.67994075 5.70405925-19.29671111 13.34992592-26.2144 22.9376-7.03905185 10.19448889-12.25765925 21.48124445-15.04900741 33.49617778 0 0-3.39816297 12.74311111-8.25268147 21.6026074-9.95176297 17.3549037-28.27757037 29.12711111-49.63745186 29.12711112h-2.18453334c-31.67573333 0-57.40468148-25.72894815-57.40468147-57.40468148 0-0.60681482 0-8.98085925 1.9418074-16.7480889 1.33499259-5.5826963 3.51952592-10.92266667 5.5826963-16.26263703 8.98085925-23.66577778 22.69487408-45.38974815 40.17114074-63.83691852 17.59762963-18.20444445 38.71478518-32.64663703 62.13783703-42.11294815 24.27259259-10.07312592 51.4578963-15.04900741 81.43454816-15.0490074 38.71478518 0 70.99733333 5.33997037 96.96900741 16.0199111 25.97167408 10.67994075 46.72474075 23.9085037 62.62328888 39.6856889 27.54939259 26.94257778 43.44794075 63.71555555 44.17611852 102.30897777-0.72817778 25.85031111-4.12634075 47.33155555-10.92266667 64.32237038z"
              fill="#1afa29" p-id="2338"></path>
        </svg>
        <span style="vertical-align: middle">您确定要退出登录吗?</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="logoutVisible = false">取 消</el-button>
            <el-button type="primary" @click="logoutVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <!--    欢迎用户按钮-->
    <el-popover
        placement="bottom"
        width="100"
        trigger="hover">
      <div class="head-icon-user" slot="reference">
        <span style="line-height: 40px">欢迎您, XXX</span>
      </div>

      <!--      设置密码弹框-->
      <div class="head-setting" @click="settingPassword = true">
        <div style="float: left;margin: 0 10px 0 20px">
          <svg t="1653718345881" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="2170" width="19" height="19">
            <path
                d="M940 596l-76-57.6c0.8-8 1.6-16.8 1.6-26.4s-0.8-18.4-1.6-26.4l76-57.6c20.8-16 26.4-44 12.8-68l-84.8-143.2c-9.6-16.8-28-27.2-47.2-27.2-6.4 0-12 0.8-18.4 3.2L712 228c-15.2-10.4-31.2-19.2-47.2-26.4l-13.6-92c-4-26.4-26.4-45.6-53.6-45.6H426.4c-27.2 0-49.6 19.2-53.6 44.8L360 201.6c-16 7.2-31.2 16-47.2 26.4l-90.4-35.2c-6.4-2.4-12.8-3.2-19.2-3.2-19.2 0-37.6 9.6-46.4 26.4L71.2 360c-13.6 22.4-8 52 12.8 68l76 57.6c-0.8 9.6-1.6 18.4-1.6 26.4s0 16.8 1.6 26.4l-76 57.6c-20.8 16-26.4 44-12.8 68l84.8 143.2c9.6 16.8 28 27.2 47.2 27.2 6.4 0 12-0.8 18.4-3.2L312 796c15.2 10.4 31.2 19.2 47.2 26.4l13.6 92c3.2 25.6 26.4 45.6 53.6 45.6h171.2c27.2 0 49.6-19.2 53.6-44.8l13.6-92.8c16-7.2 31.2-16 47.2-26.4l90.4 35.2c6.4 2.4 12.8 3.2 19.2 3.2 19.2 0 37.6-9.6 46.4-26.4l85.6-144.8c12.8-23.2 7.2-51.2-13.6-67.2zM704 512c0 105.6-86.4 192-192 192S320 617.6 320 512s86.4-192 192-192 192 86.4 192 192z"
                p-id="2171" fill="#8a8a8a"></path>
          </svg>
        </div>
        <div style="float: left;margin-top: 5px">修改密码</div>
      </div>
    </el-popover>

    <!--    修改密码表单弹框-->
    <el-dialog title="修改密码" :visible.sync="settingPassword" class="head-password">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="旧密码" prop="oldPass">
          <el-input type="password" v-model="ruleForm.oldPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <div class="head-submit">
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-dialog>

    <!--    消息通知按钮-->
    <el-popover
        placement="bottom"
        width="268"
        trigger="click"
        v-model="visible">
      <div style="width: 100%; height: 100px">

        <!--        通知-->
        <div class="message">
          <div style="width: 80px;height: 44px;color: #1890ff;border-bottom:2px solid #1890ff;cursor: pointer">
            <div style="padding: 12px 16px 12px 16px">通知(0)</div>
          </div>
        </div>

        <div class="more" @click="outerVisible = true">
          <span>查看更多</span>
        </div>
      </div>

      <div class="head-icon-right" slot="reference">
        <svg t="1653630301003" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="7263" width="30" height="30">
          <path
              d="M576 759.189333a64 64 0 0 1-127.893333 3.754667L448 759.189333h128zM512 170.666667c108.586667 0 200.234667 72.725333 200.234667 168.106666v202.837334l65.877333 118.784c25.706667 29.738667 4.394667 75.669333-35.072 75.669333H280.96c-39.466667 0-60.778667-45.930667-35.072-75.669333l65.877333-118.784v-202.858667C311.765333 243.413333 403.413333 170.666667 512 170.666667z m0 64c-77.44 0-136.234667 48.512-136.234667 104.106666v219.392l-63.168 113.92h398.805334l-63.168-113.92V338.773333C648.234667 283.178667 589.418667 234.666667 512 234.666667z"
              p-id="7264" fill="#ffffff"></path>
        </svg>
      </div>
    </el-popover>

    <!--    查看更多 弹框 外层-->
    <el-dialog title="通知" :visible.sync="outerVisible">

      <!--      弹框 内层-->
      <el-dialog
          width="60%"
          title="消息通知"
          :visible.sync="innerVisible"
          append-to-body>
        <div style="height: 400px">
          <div style="border-bottom: 1px solid #cdcdcd;margin-bottom: 20px">
            <h1>试用期到期提醒</h1>
          </div>
          <p style="font-size: 17px">试用期即将结束，请您及时续费，过期将会影响正常使用！</p>
        </div>
      </el-dialog>

      <el-form :model="form" style="width: 370px;float: left">
        <el-form-item label="标题" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="on" placeholder="请输入标题"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="" style="margin-left: 20px">查 询</el-button>
      <el-button @click="">重 置</el-button>
      <div slot="footer" class="dialog-footer">
        <div style="margin-bottom: 20px">
          <el-button type="primary">全部标注已读</el-button>
        </div>

        <!--        表格-->
        <div>
          <el-table
              :data="tableData"
              border
              style="width: 100%">
            <el-table-column
                prop="title"
                label="标题"
                width="350">
            </el-table-column>
            <el-table-column
                prop="type"
                label="消息类型">
            </el-table-column>
            <el-table-column
                prop="date"
                label="时间"
                width="180">
            </el-table-column>
            <el-table-column
                label="操作">
              <span class="doSome" @click="innerVisible = true">查看</span>
            </el-table-column>
          </el-table>
        </div>

        <!--        分页-->
        <div class="block">
          <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 20, 30]"
              :page-size="3"
              layout="total, sizes, prev, pager, next, jumper"
              :total="1">
          </el-pagination>
        </div>
      </div>
    </el-dialog>

    <!--    官网按钮-->
    <div class="head-icon-right">
      <svg t="1653630675085" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
           p-id="7437" width="30" height="30">
        <path
            d="M539.242667 162.154667l277.333333 130.517333A64 64 0 0 1 853.333333 350.570667v79.850666h-60.245333V671.36H853.333333v116.693333a64 64 0 0 1-64 64H234.666667a64 64 0 0 1-64-64v-116.693333h60.224V430.421333H170.666667v-79.850666a64 64 0 0 1 36.757333-57.898667l277.333333-130.517333a64 64 0 0 1 54.485334 0zM789.333333 735.381333H234.666667v52.693334h554.666666v-52.693334zM391.530667 430.421333h-96.64v240.746667h96.618666V430.421333z m64 0l-0.021334 240.746667h116.714667V430.421333h-116.693333zM512 220.074667l-277.333333 130.496v15.850666h554.666666v-15.850666l-277.333333-130.496z m124.224 451.093333h92.864V430.421333h-92.842667l-0.021333 240.746667z"
            p-id="7438" fill="#ffffff"></path>
      </svg>
    </div>

    <!--    搜索按钮-->
    <div class="head-icon-right">
      <svg t="1653630845954" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
           p-id="7611" width="30" height="30">
        <path
            d="M469.333 192c153.174 0 277.334 124.16 277.334 277.333 0 68.054-24.534 130.411-65.216 178.688L846.336 818.24l-48.341 49.877L630.4 695.125a276.053 276.053 0 0 1-161.067 51.542C316.16 746.667 192 622.507 192 469.333S316.16 192 469.333 192z m0 64C351.51 256 256 351.51 256 469.333s95.51 213.334 213.333 213.334 213.334-95.51 213.334-213.334S587.157 256 469.333 256z"
            p-id="7612" fill="#ffffff"></path>
      </svg>
    </div>
  </div>
</template>

<script>
import bus from '../assets/js/eventBus'

export default {
  name: "Header",
  data() {
    let validateOldPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        console.log(value)
        callback();
      }
    };
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else if (this.ruleForm.pass.length < 6) {
        callback(new Error('密码不能少于6位!'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      isCollapse: true,
      visible: false,
      innerVisible: false,
      outerVisible: false,
      settingPassword: false,
      logoutVisible: false,
      form: {
        title: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      formLabelWidth: '120px',
      passwordWidth: '400px',
      tableData: [{
        title: '试用时间到期提醒',
        type: '试用到期',
        date: '2022.5.28 11:52:32',
      },],
      currentPage: 4,
      ruleForm: {
        oldPass: '',
        pass: '',
        checkPass: '',
        age: ''
      },
      rules: {
        oldPass: [
          {validator: validateOldPass, trigger: 'blur'}
        ],
        pass: [
          {validator: validatePass, trigger: 'blur'}
        ],
        checkPass: [
          {validator: validatePass2, trigger: 'blur'}
        ],
      }
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    extend() {
      if (this.isCollapse == true) {
        this.isCollapse = false
        bus.$emit('todosAll', this.isCollapse)
      } else {
        this.isCollapse = true
        bus.$emit('todosAll', this.isCollapse)
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
          this.settingPassword = false;
          this.$refs[formName].resetFields();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}

</script>

<style >
.head-icon {
  width: 44px;
  height: 40px;
  margin-top: 10px;
  float: left;
}

.head-icon:hover, .head-icon-right:hover,
.head-icon-user:hover {
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
}

.icon {
  margin-top: 5px;
  margin-left: 7px;
}

.head-icon-right {
  width: 44px;
  height: 40px;
  margin: 10px 0 0 10px;
  float: right;
}

.head-icon-user {
  padding: 0 5px 0 5px;
  height: 40px;
  margin: 10px 0 0 10px;
  float: right;
  color: white;
}

.message {
  height: 45px;
  background-color: white;
  border-bottom: 1px solid #cdcdcd;
}

.more {
  height: 28px;
  margin-top: 18px;
  border: 1px dashed #cdcdcd;
  text-align: center;
  padding-top: 6px;
  font-size: 16px;
  cursor: pointer;
}

.more:hover {
  color: #1890ff;
  border: 1px dashed #1890ff;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.el-dialog__header {
  border-bottom: 1px solid #cdcdcd;
}

.el-dialog__body {
  padding: 30px 15px 15px 15px;
}

.el-form-item__label {
  width: 70px !important;
  float: left;
  text-align: center;
}


.el-dialog__footer {
  text-align: left;
}

span.doSome {
  color: #1890ff;
  cursor: pointer;
}

.block {
  height: 100px;
}

.el-pagination {
  margin-top: 30px;
  width: 450px;
  float: right;
}

.el-dialog {
  min-width: 900px;
}

.confirm-logout .el-dialog {
  min-width: 500px;
  text-align: center;
}

.confirm-logout .el-dialog__footer{
  text-align: center;
}

.head-setting {
  height: 30px
}

.head-setting:hover {
  background-color: rgba(205, 205, 205, 0.3);
  cursor: pointer;
}

.head-password .el-form-item__content {
  width: 80%;
  height: 50px;
}

.head-submit .el-form-item__content {
  text-align: center;
  width: 100%;
  margin-left: 0!important;
}



</style>